<template>
    <el-select v-bind="$attrs">
        <el-option v-for="op in options_c" :key="op[valueCol]" :label="op[labelCol]" :value="op[valueCol]">
            <slot name="option" :option="op">
                {{op[labelCol]}}
            </slot>
        </el-option>
    </el-select>
</template>

<script setup lang="ts">

import {computed, useAttrs} from "vue";

const props = withDefaults(defineProps<{
    options: any,
    labelCol?: string,
    valueCol?: string,
}>(), {
    labelCol: 'title',
    valueCol: 'id'
})

const attrs = useAttrs()

const options_c = computed(()=>{
    const {valueCol}  = props
    const { options } = props
    if(typeof attrs.modelValue == 'number' || (Array.isArray(attrs.modelValue) && typeof attrs.modelValue[0] == 'number')){
        // 将 options中的id强制转为number
        for(let i in options){
            options[i][valueCol] = Number(options[i][valueCol])
        }
    }else if(typeof attrs.modelValue == 'string' || (Array.isArray(attrs.modelValue) && typeof attrs.modelValue[0] == 'string')){
        // 强制转为string
        for(let i in options){
            options[i][valueCol] = String(options[i][valueCol])
        }
    }
    return options
})

</script>

<style scoped>

</style>
